import React, { Component } from 'react'
import { NavBar, Icon, Carousel, Toast } from "antd-mobile";
import "./GoodDetail.css";
import myaxios from "../../utils/myaxios";
export default class GoodDetail extends Component {
    constructor(props) {
        super(props);
        console.log(props);
        console.log(props.match.params.goods_id);//id
    }
    state = {
        goodInfo: {},
        imgHeight: 250,
        showSwiper: false,//设置轮播图是否显示 默认情况不显示
        showCollect: false
    }
    componentDidMount() {
        let { goods_id } = this.props.match.params;
        myaxios.get("goods/detail", {
            params: {
                goods_id,
            }
        }).then((res) => {
            console.log(res);
            this.setState({
                goodInfo: res,
                showSwiper: true
            })
        }).catch((err) => {
            return console.log(err)
        })
        //初次进入商品详情的时候 判断商品是否被收藏
        let collections_str = localStorage.getItem("collections");
        let collections = JSON.parse(collections_str || "[]");
        //对收藏进行循环遍历
        //判断是否在收藏中
        //判断是否在收藏中
        //这里是异步代码
        let index = collections.findIndex(v => {
            console.log(goods_id,v.goods_id);
            if (v.goods_id == goods_id) {
                return true;
            }
        })
        console.log(index);
        if (index != -1) {
            console.log("我是");
            this.setState({
                showCollect: true
            })
        }
    }
    handleCollect = (params) => {
        //collections 代表的是收藏的数据 数组
        let collections_str = localStorage.getItem("collections");
        let collections = JSON.parse(collections_str || "[]");
        //对收藏进行循环遍历
        //判断是否在收藏中
        let index = collections.findIndex(v => {
            if (v.goods_id === this.state.goodInfo.goods_id) {
                return true;
            }
        })
        if (index != -1) {
            //代表之前有收藏过
            collections.splice(index, 1);
            Toast.info("取消收藏成功", 1)
            this.setState({
                showCollect: false
            })
        } else {
            Toast.info("收藏成功", 1);
            collections.push(this.state.goodInfo);
            this.setState({
                showCollect: true
            })
        }
        localStorage.setItem("collections", JSON.stringify(collections));
    }
    goToCart=(params) => {
        this.props.history.push("/cart")
    }
    addToCart=(params) => {
        //1.首先从本地缓存中获取购物车数据
        let carts_str = localStorage.getItem("carts");
        let carts = JSON.parse(carts_str || "[]");
        //获取goods_id
        let {goods_id} =this.props.match.params;
        let index = carts.findIndex(v=>{
            if(v.goods_id == goods_id){
                return true;
            }
        })
        //index === -1 代表找不到
        if(index === -1){
            let goods_info = this.state.goodInfo;
            goods_info.num = 1;
            goods_info.checked = true;
            carts.push(goods_info)
        }else{
            carts[index].num++
        }
        Toast.info("加入购物车成功",1);
        localStorage.setItem("carts",JSON.stringify(carts));
    }
    pay = (params) => {
        this.props.history.push("/pay")
    }
    
    render() {
        return (
            <div className="yg-detail">
                <div className="yg-detail-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >商品详情</NavBar>
                </div>
                {/* 详情页轮播图的开始 */}
                <div className="yg-detail-swiper">
                    {this.state.showSwiper && (<Carousel autoplay={true} infinite>
                        {this.state.goodInfo.pics.map(val => (
                            <div
                                key={val.goods_id}
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }} className="imageWrapper"
                            >
                                <img
                                    src={val.pics_big}
                                    alt=""
                                    style={{ width: '80%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>)}
                </div>
                {/* 详情页轮播图的结束 */}
                {/* 价格和分享区域开始 */}
                <div className="yg-detail-price">
                    <div className="price-left">
                        <span className="title1">￥{this.state.goodInfo.goods_price}</span>
                    </div>
                    <div className="price-right">
                        <i className="iconfont icon-fenxiang"></i>
                        <i className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"} onClick={this.handleCollect}></i>
                    </div>
                </div>
                {/* 价格和分享区域开始 */}
                {/* 商品标题的开始 */}
                <div className="yg-detail-title">
                    {this.state.goodInfo.goods_name}
                </div>
                {/* 商品标题的结束 */}
                {/* 图文详情开始 */}
                <div className="yg-detail-richtext">
                    <div className="richtext-title">图文详情</div>
                    <div className="richtext-content" dangerouslySetInnerHTML={{ __html: this.state.goodInfo.goods_introduce }}>
                    </div>
                </div>
                {/* 图文详情结束 */}
                {/* 底部工具栏的开始 */}
                <div className="yg-detail-bottom">
                    <div className="bottom-contact">
                        <i className="iconfont icon-lianxikefu"></i>
                        <div className="title">联系客服</div>
                    </div>
                    <div className="bottom-cart" onClick={this.goToCart}>
                        <i className="iconfont icon-gouwuche"></i>
                        <div className="title">购物车</div>
                    </div>
                    <div className="bottom-addToCart" onClick={this.addToCart}>
                        <span className="title1">加入购物车</span>
                    </div>
                    <div className="bottom-buy" onClick={this.pay}>
                        <span className="title2">立即购买</span>
                    </div>
                </div>
                {/* 底部工具栏的结束 */}
            </div >
        )
    }
}
